<template>
    <div class="index-container-Info" >
        <ul class="Info-nav font">
            <li v-for="(item,key) in content" @mouseover="onChange(key)" ><router-link :class="{'active': key === abutmentIndex}" :to="{path:'#'}">{{key}}</router-link></li>
        </ul>
        <div class="Info-content font" v-for="(item,key) in content" v-if="key === abutmentIndex" >
            <li v-for="(item2,index) in item"><router-link :to="{path: '#'}">
                <img src='../../images/blue1.jpg'>{{(item2.sponsor == 'demander'?'【企业】':'【服务机构】') +item2.title}}</router-link>
                <div style="color:#333333;line-height:40px;font-size:16px;float:right">
                    {{new Date(parseInt(item2.create_time)).toLocaleDateString()}}
                </div>
            </li>
        </div>
     </div>      
</template>
<script>
    export default {
        props: {
            content:{
                type: Object
            }
        },
        data () {
            return {
                abutmentIndex:"对接成功",

        }
    },
    methods:{
        onChange(key){
            this.abutmentIndex = key;
        }
    }
}
</script>
<style scoped>
       .index-container-Info{
         height:395px;
         border: 1px solid #aaaaaa;
     }
     .Info-nav{
         height: 45px;
         width: 100%;
         border-bottom: 1px solid #aaaaaa;
     }
     .Info-nav li{  
         float: left;
         width: 100px;
     }
     .Info-nav li a{
         display: block;
         height: 45px;
        line-height: 45px;
        text-align: center;
         text-decoration: none;
         color: #333333;
         font-size: 18px;
     }
    .active{
        background-color: #e24121;
        color: #ffffff !important;
    }
    .Info-content{
        height: 349px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .Info-content li{
        height: 40px;
        line-height: 40px;
        list-style: none;
        font-size: 16px;
        overflow: hidden;
    }
    .Info-content a{
        display: block;
        width: 75%;
        float: left;
        color: #333333;
    }
    .Info-content a:hover{
         font-weight: 700;
    }
</style>